<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
    <!--element日期所需-->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style>
        .left{
            width: 40%;         /*宽度*/
            float: left;        /*浮动*/
        }
        .right{
            width: 40%;         /*宽度*/
            float: left;        /*浮动*/
        }
        .fox{
            background: white;
        }
    </style>
</head>
<body class="hold-transition">
<!--日期控件-->

<div id="app">
    <div class="content-header">
        <h1>年龄分布</h1>
    </div>
    <div class="app-container" style="height: 800px">
        <div class="fox">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div >
                <div id="chart1" class="left" style="height:440px; width: 30%"/>
            </div>
            <div>
                <div id="chart2" class="right" style="height:440px; width: 70%"/>
            </div>
            <div/><div/><div/><div/><div/>
            <br>

        </div>
        <div>
            <p style="text-align: center">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="../img/bule.png" style="height: 12px;width: 12px">&nbsp;&nbsp;&nbsp;机构会员本月总预约次数:{{count.thisMothOrder}}
                <br>
                <img src="../img/bule.png" style="height: 12px;width: 12px">&nbsp;&nbsp;&nbsp;机构总会员数:{{count.total}}
            </p>
        </div>
    </div>
</div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            count: {}
        },
        created() {
            axios.post("/member/memberCount.do").then((resp) => {
                this.count = resp.data.data;
            }).catch((r) => {
                this.showMessage(r);
            })
        },
        showMessage(r){
            if(r == 'Error: Request failed with status code 403'){
                //权限不足
                this.$message.error('无访问权限');
                return;
            }else{
                this.$message.error('未知错误');
                return;
            }
        }
    });
    var myChart = echarts.init(document.getElementById('chart1'));
    axios.get("/report/getAgeGroup.do").then((res) => {
        myChart.setOption({
            title: {
                text: '套餐预约占比',
                subtext: '',
                x: 'center'
            },
            tooltip: {//提示框组件
                trigger: 'item',//触发类型，在饼形图中为item
                formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: res.data.data.ageGroup
            },
            series: [//数据系列
                {
                    name: '套餐预约占比',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: res.data.data.num,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    });
    var myChart1 = echarts.init(document.getElementById('chart2'));
    axios.get("/report/getAgeGroup.do").then((res) => {
        myChart1.setOption({
            xAxis: {
                type: 'category',
                data: ["婴幼儿(0-6)","青少年(7-17)","青年(18-45)","中年(45-69)","老年(69+)","未知",]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: res.data.data.num,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220,30,27,0.8)'
                }
            }]
        });
    });
</script>
</html>